<template>
  <div  v-if="modelValue"  class="model">
    {{modelValue}}
    <div>
      <button class="close" @click="close">关闭</button>
    </div>
    <h3>我是v-model子组件 dialog</h3>
    <div>内容:<input @input="updateName" type="text" :value="textVal"/></div>
  </div>
</template>
<script setup lang="ts">

const props = defineProps<{
  modelValue:boolean,
  textVal:string,
  textValModifiers?:{
    isBtn:boolean
  }
}>()

const emit = defineEmits(["update:modelValue","update:textVal"])
const close = ()=>{
  emit('update:modelValue',false)
}
const updateName = (e:Event)=>{
  const target = e.target as HTMLInputElement
  emit("update:textVal",props?.textValModifiers?.isBtn ? target.value + "多少岁了?" : target.value)
}
</script>

<style scoped>
  .model{
    width: 500px;
    border: 5px solid #ccc;
    padding: 10px;
  }
  .close{

    margin-right: -400px;
  }
</style>
